import React, { PureComponent } from 'react'
import styles from './index.less'

export default class ArrowIcon extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      iconName: styles.icon_shousuo1,
    }
  }

  render() {
    const { iconName } = this.state
    return (
      <div
        onClick={() => {
          this.setState(
            {
              iconName:
                iconName === styles.icon_shousuo1
                  ? styles.icon_shousuo_copy1
                  : styles.icon_shousuo1,
            },
            () => {
              this.props.shousuoFun && this.props.shousuoFun(iconName === styles.icon_shousuo_copy1)
            },
          )
        }}
        className={`dark_layout_icon_shousuo ${styles.icon_shousuo}`}
      >
        <img
          src={iconName === styles.icon_shousuo1 ? require('@/assets/images/arrowIcon/shousuo.png') : require('@/assets/images/arrowIcon/tanchu.png')}
          alt=""
          className={`dark_layout_icon_shousuo ${styles.icon_shousuo} unhovered`}
        />
        <img
          src={iconName === styles.icon_shousuo1 ? require('@/assets/images/arrowIcon/shousuo-hover.png') : require('@/assets/images/arrowIcon/tanchu-hover.png')}
          alt=""
          className={`dark_layout_icon_shousuo ${styles.icon_shousuo} hovered`}
        />
      </div>
    )
  }
}
